//最简单最暴力的轮播思路！
window.onload=function(){
    window.scrollTo(192,0);//让页面滚动条居中
    //放在该函数块内保证dom节点被全部加载后才执行其中的函数，否则元素不会被找到
    var index = 1;
    var img = document.getElementById('slideimg');
    var clearActive = function(){
        //该函数用来初始化小圆点的状态
        for(i=0;i<5;i++){
            points[i].className='iot_point';
        }
    }
    function dotschange(){
        //小圆点跟着图片的轮播而变化
        clearActive();
        points[index-1].className='iot_point active';
    }
    function slide(){
        index++;
        if(index > 5){
            index = 1;
        }//重新轮播
        img.src = "img/slide"+index+".jpg";
    }
    timer = setInterval(slide,2000);//设置轮播时间
    pschange=setInterval(dotschange,2000);//设置小圆点变化时间，实际上圆点变化与图片变化不同步，由此形成延迟的视差效果
    var points = document.querySelectorAll(".iot_point");//找到小圆点
    for( let i = 0;i < 5;i++){
            points[i].addEventListener('click',function(){
                //设置点击圆点事件，使得点击圆点后变成相应图片且圆点变红
                clearActive();
                this.className = 'iot_point active';
                var pointindex = this.getAttribute('data-index');
                img.src = "img/slide"+pointindex+".jpg";
        })
}
}
